<template>
    <div>
<!-- 计算结果 小项组件 -->
        <el-collapse v-if="stylelist.length>0">
            <el-collapse-item :title="data.showname" :key="data.showname" v-if="even3(list,data.id).length>0" v-for="data in stylelist ">

                <el-card class="box-card">
                    <div slot="header" class="card-heaer">
                        <span style="line-height: 36px;">{{data.showname}}</span>
                    </div>

                    <el-form :model="item" label-width="100px" ref="item" :inline="true" class="demo-ruleForm" :key="item.BILL_DATA_ID" v-for="(item,index) in even(list,data.id)">
                        <el-form-item label="项目代码" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_CODE'" :rules="{
                  required: data.id!='201705110926265811', message: '项目代码不能为空', trigger: 'blur'
                }">
                            <el-input v-model="item.BILL_DATA_DETAIL_CODE" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称" :prop="'BILL_DATA_DETAIL_ZNAME'" :rules="{
                  required: true, message: '项目名称不能为空', trigger: 'blur'
                }">
                            <el-input v-model="item.BILL_DATA_DETAIL_ZNAME" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目描述" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_DETIAL'" :rules="{
                  required: data.id!='201705110926265811', message: '项目描述不能为空', trigger: 'blur'
                }">
                            <el-input v-model="item.BILL_DATA_DETAIL_DETIAL" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目单价" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_PMONEY'" :rules="{
                  required: data.id!='201705110926265811', message: '项目单价不能为空', trigger: 'blur'
                }">
                            <el-input v-model="item.BILL_DATA_DETAIL_PMONEY" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目数量" :prop="'BILL_DATA_DETAIL_COUNT'" v-if="data.id!='201705110926265811'" :rules="{
                  required: data.id!='201705110926265811', message: '项目数量不能为空', trigger: 'blur'
                }">
                            <el-input v-model="item.BILL_DATA_DETAIL_COUNT" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目费用" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_CMONEY'" :rules="{
                  required: data.id!='201705110926265811', message: '项目费用不能为空', trigger: 'blur'
                }">
                            <el-input v-model="item.BILL_DATA_DETAIL_CMONEY" :disabled="editer"></el-input>
                        </el-form-item>

                        </el-form-item>

                    </el-form>
                    <div class="space20">
                    </div>
                    <div v-if="even2(list,data.id).length>0">
                        <div class="sapce20">
                        </div>
                        <div style="color:red">未赔付项:</div>
                         <div class="sapce20">
                        </div>
                        <el-form :model="item" label-width="100px" ref="item" :inline="true" class="demo-ruleForm" :key="item.BILL_DATA_ID" v-for="(item,index) in even2(list,data.id)">
                            <el-form-item label="项目代码" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_CODE'" :rules="{
                  required: data.id!='201705110926265811', message: '项目代码不能为空', trigger: 'blur'
                }">
                                <el-input v-model="item.BILL_DATA_DETAIL_CODE" :disabled="editer"></el-input>
                            </el-form-item>
                            <el-form-item label="项目名称" :prop="'BILL_DATA_DETAIL_ZNAME'" :rules="{
                  required: true, message: '项目名称不能为空', trigger: 'blur'
                }">
                                <el-input v-model="item.BILL_DATA_DETAIL_ZNAME" :disabled="editer"></el-input>
                            </el-form-item>
                            <el-form-item label="项目描述" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_DETIAL'" :rules="{
                  required: data.id!='201705110926265811', message: '项目描述不能为空', trigger: 'blur'
                }">
                                <el-input v-model="item.BILL_DATA_DETAIL_DETIAL" :disabled="editer"></el-input>
                            </el-form-item>
                            <el-form-item label="项目单价" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_PMONEY'" :rules="{
                  required: data.id!='201705110926265811', message: '项目单价不能为空', trigger: 'blur'
                }">
                                <el-input v-model="item.BILL_DATA_DETAIL_PMONEY" :disabled="editer"></el-input>
                            </el-form-item>
                            <el-form-item label="项目数量" :prop="'BILL_DATA_DETAIL_COUNT'" v-if="data.id!='201705110926265811'" :rules="{
                  required: data.id!='201705110926265811', message: '项目数量不能为空', trigger: 'blur'
                }">
                                <el-input v-model="item.BILL_DATA_DETAIL_COUNT" :disabled="editer"></el-input>
                            </el-form-item>
                            <el-form-item label="项目费用" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_CMONEY'" :rules="{
                  required: data.id!='201705110926265811', message: '项目费用不能为空', trigger: 'blur'
                }">
                                <el-input v-model="item.BILL_DATA_DETAIL_CMONEY" :disabled="editer"></el-input>
                            </el-form-item>

                            </el-form-item>

                        </el-form>
                    </div>
                    <div v-for="(de,index) in getitem(data.id)" :key="index">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="总花费：">
                                ${{de.RESULT_ITEM_ALLMONEY}}
                            </el-form-item>
                            <el-form-item label="用户实际花费：">
                                ${{de.RESULT_ITEM_USERMONEY}}
                            </el-form-item>
                            <el-form-item label="用户自付比例金额：">
                                ${{de.RESULT_ITEM_YHZFBLMONEY}}
                            </el-form-item>
                            <el-form-item label="保险公司支付：">
                                ${{de.RESULT_ITEM_PAYMONEY}}
                            </el-form-item>
                            <el-form-item label="说明：">
                                {{de.RESULT_ITEM_DESCRIBE}}
                            </el-form-item>

                        </el-form>

                    </div>

                </el-card>
            </el-collapse-item>

        </el-collapse>

    </div>
</template>
<script>
import {
    mapState
} from 'vuex';
// import liepeiup_item from '@/components/jisuan_item';
import getid from '@/js/getid';
export default {
    props: {
        billdataid: {
            type: Number,
            default: ""
        },
        editer: {
            type: Boolean,
            default: true
        },
        islipei: {
            type: Boolean,
            default: false
        },
        detail: {
            type: Array,
            default: []
        }


    },
    data() {
        return {
            dataitemname: [], //下列列表数据
            dataitem: [], //类型数据
            options: [], //下列列表数据源
            namevalue: "", //选择的数据名称
            stylelist: [],
            list: [], //BILL_DATA_DETAIL
            showlist: [],
            detailitem: []
            // bill:[]//最终账单数据

        };
    },
    computed: mapState({
        bill: state => state.bill.bill

    }),
    methods: {
        even: function(numbers, key) {
            return numbers.filter(function(number) {
                if (number.DUTYITEM_ID == key && number.BILL_DATA_DETAIL_STATE != "删除" && number.BILL_DATA_DETAIL_ISSHOW != "删除") {
                    return number;
                }

            })
        },
        even2: function(numbers, key) {
            return numbers.filter(function(number) {              
                if (number.DUTYITEM_ID == key && number.BILL_DATA_DETAIL_STATE == "删除") {                   
                    return number;
                }
              

            })
        },
        even3: function(numbers, key) {
            return numbers.filter(function(number) {
             
                if (number.DUTYITEM_ID == key) {
                    
                    return number;

                }
             

            })
        },
        getitem(id) {
            var arry = [];
            for (var i = 0; i < this.detailitem.length; i++) {
                if (this.detailitem[i].DUTYITEM_ID == id) {
                    arry.push(this.detailitem[i]);
                }

            }
            return arry;
        },
        handleItemChange(item) {
            var index = this.list.indexOf(item)
            if (index !== -1) {
                this.list[index].DUTYITEM_FID = this.list[index].arry[0];
                this.list[index].DUTYITEM_ID = this.list[index].arry[1];
                var name = this.getvalue(this.list[index].arry);
                //修改类型数组
                for (var i = 0; i < this.stylelist.length; i++) {
                    if (this.stylelist[i].showname == name.showname) {
                        return;
                    }
                    if (i == this.stylelist.length - 1) {
                        this.stylelist.push(name);
                    }
                }



            }



        },
        delectdata(item, id) {
            //删除条，删除list中 id相同数据              
            var index = this.stylelist.indexOf(item)
            if (index !== -1) {
                this.stylelist.splice(index, 1)
            }
            var arry = [];
            for (var i = 0; i < this.list.length; i++) {
                if (this.list[i].DUTYITEM_ID != id) {
                    arry.push(this.list[i])

                }
            }
            this.list = arry;

            for (var i = 0; i < this.bill.length; i++) {
                if (this.bill[i].BILL_DATA_ID == this.billdataid) {
                    this.bill[i].BILL_DATA_DETAIL = this.list;

                } else {

                }
            }

        },
        delectitem(item) {
            var index = this.list.indexOf(item)
            if (index !== -1) {
                this.list[index].BILL_DATA_DETAIL_STATE = "删除";

            }
        },


        getvalue(arry) {
            for (var i = 0; i < this.options.length; i++) {
                if (this.options[i].value == arry[0]) {

                    var namevalue = this.options[i].label + "-";
                    for (var k = 0; k < this.options[i].children.length; k++) {
                        if (this.options[i].children[k].value == arry[1]) {
                            namevalue += this.options[i].children[k].label;
                            var obj = {};
                            obj.showname = namevalue;
                            obj.id = arry[1];

                            return obj;

                        }
                    }

                }
            }
        }
    },
    created() {

        this.detailitem = this.detail[0].RESULT_ITEM;
        for (var i = 0; i < this.bill[this.billdataid].BILL_DATA_DETAIL.length; i++) {
            if (typeof (this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry) != "object") {

                this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry = this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry.split(",");
            }

        }
        this.list = this.bill[this.billdataid].BILL_DATA_DETAIL;
        var arry = this.bill[this.billdataid].BILL_DATA_DETAIL;
        var s = new Set();
        var sname = new Set();
        for (var i = 0; i < arry.length; i++) {
            var showname = arry[i].DUTYITEM_NAME1 + "-" + arry[i].DUTYITEM_NAME;
            s.add(arry[i].DUTYITEM_ID); // showlist[]
            sname.add(showname);
        }

        var arry = [];
        var sarry = Array.from(s);
        var snamearry = Array.from(sname);
        for (var i = 0; i < sarry.length; i++) {
            var obj = {};
            obj.showname = snamearry[i];
            obj.id = sarry[i];
            arry.push(obj);
        }

        this.stylelist = arry;
        this.$http.get("DutyItem").then(response => {
            var data = response.body;
            this.options = data;
        }, response => {
            this.$notify.error({
                title: '网络错误',
                message: '网络错误'
            });
            this.loding = false;
        });

    }

}
</script>